<template>
	<view class="page-root">
		<view class="blur-red-bg">
			<view class="register-container ">

				<!-- 1. 服务商名称（label：服务商名称） -->
				<view class="input-item">
					<view class="input-icon">
						<wd-icon name="user" size="22px"></wd-icon>
					</view>
					<!-- v-model 绑定：form.serviceName（原 username，语义不匹配） -->
					<wd-input 
						v-model="form.serviceName" 
						placeholder="请输入服务商名称" 
						:maxlength="20" 
						input-align="left"
						class="input flex-1" 
						label="服务商名称" 
						label-width="160rpx"
					></wd-input>
				</view>

				<!-- 2. 负责人（label：负责人） -->
				<view class="input-item">
					<view class="input-icon">
						<wd-icon name="user" size="22px" class="input-icon"></wd-icon>
					</view>
					<!-- 修正：原 mobile（语义错）→ contactPerson；原 type="number"（错，负责人是文本）→ 移除 -->
					<wd-input 
						v-model="form.contactPerson" 
						placeholder="请输入负责人" 
						:maxlength="10" 
						input-align="left"
						class="input flex-1" 
						label="负责人" 
						label-width="150rpx"
					></wd-input>
				</view>

				<!-- 3. 位置（label：位置） -->
				<view class="input-item">
					<view class="input-icon input-icon-textarea">
						<wd-icon name="location" size="22px" class="input-icon"></wd-icon>
					</view>
					<!-- 修正：原 location（与服务范围重复）→ address；label-width 统一 150rpx -->
					<wd-textarea 
						v-model="form.address" 
						label-width="150rpx"  
						placeholder="请输入位置" 
						label="位置"
					></wd-textarea>
				</view>

				<!-- 4. 联系电话（label：联系电话） -->
				<view class="input-item">
					<view class="input-icon">
						<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
					</view>
					<!-- 保留：phone 语义匹配，type="number" 正确 -->
					<wd-input 
						v-model="form.contactPhone" 
						placeholder="请输入联系电话" 
						type="number" 
						:maxlength="11" 
						input-align="left"
						class="input" 
						label="联系电话" 
						label-width="150rpx"
					></wd-input>
				</view>

				<!-- 5. 服务范围（label：服务范围）- 第一个 -->
				<view class="input-item">
					<view class="input-icon input-icon-textarea">
						<wd-icon name="list" size="22px" class="input-icon"></wd-icon>
					</view>
					<!-- 修正：原 location（重复）→ serviceScope；两个服务范围绑定同一属性 -->
					<wd-textarea 
						v-model="form.serviceScope" 
						label-width="150rpx"  
						placeholder="请输入服务范围" 
						label="服务范围"
					></wd-textarea>
				</view>

				<!-- 6. 服务范围（label：服务范围）- 第二个（保留，避免用户重复输入，绑定同一属性） -->
				<view class="input-item">
					<view class="input-icon input-icon-textarea">
						<wd-icon name="list" size="22px" class="input-icon"></wd-icon>
					</view>
					<wd-textarea 
						v-model="form.serviceScope" 
						label-width="150rpx"  
						placeholder="请补充服务范围（可选）" 
						label="服务范围"
					></wd-textarea>
				</view>

				<!-- 7. 营业执照（label：营业执照） -->
				<view class="input-item">
					<view class="input-icon input-icon-textarea ying_ye_zhizhao">
						<wd-icon name="file-certificate" size="22px" class="input-icon"></wd-icon>
					</view>
					<text class="upload-label">营业执照</text>
					<view class="upload-content">
						<!-- 修正：原绑定 avatar（语义错）→ businessLicenseUrl；fileList 对应营业执照 -->
						<wd-upload 
							:file-list="licenseFileList" 
							:limit="1" 
							:action="ossUrl" 
							@change="handleLicenseChange"
							accept="image/*"
						></wd-upload>
					</view>
				</view>

				<!-- 提交按钮 -->
				<view class="btn-register">
					<wd-button type="primary" block :loading="loading" :disabled="!canSubmit" @click="submit">
						提交
					</wd-button>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'uni-mini-router'
import { volunteer_get_user_infoApi, volunteer_submit_userinfoApi } from "@/api/volunteer"
import { onLoad } from '@dcloudio/uni-app';

// 1. 修正：营业执照上传列表（原 fileList 绑定 avatar，语义错）
const licenseFileList = ref([])
const ossUrl = ref('https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload')

// 2. 核心：根据 label 重构 form 对象（属性名与 label 完全对应，语义清晰）
const form = reactive({
	serviceName: '',     // 对应 label：服务商名称
	contactPerson: '',   // 对应 label：负责人
	address: '',         // 对应 label：位置
	contactPhone: '',    // 对应 label：联系电话
	serviceScope: '',    // 对应 label：服务范围
	businessLicenseUrl: ''// 对应 label：营业执照（存储上传地址）
})

// 3. 营业执照上传回调（绑定到 form.businessLicenseUrl）
function handleLicenseChange({ fileList: files }) {
	licenseFileList.value = files
	// 上传成功后同步到 form
	if (files.length > 0) {
		form.businessLicenseUrl = files[0].url
	} else {
		form.businessLicenseUrl = ''
	}
}

const router = useRouter()
const loading = ref(false)

// 4. 提交按钮启用判断（校验所有必填 label 对应的字段）
const canSubmit = computed(() => {
	return (
		form.serviceName.trim() !== '' &&    // 服务商名称
		form.contactPerson.trim() !== '' &&  // 负责人
		form.address.trim() !== '' &&        // 位置
		form.contactPhone.trim() !== '' &&   // 联系电话
		form.serviceScope.trim() !== '' &&   // 服务范围
		form.businessLicenseUrl.trim() !== ''// 营业执照（必填，可根据需求调整）
	)
})

// 5. 表单验证（根据新属性调整校验逻辑）
const validateForm = () => {
	// 服务商名称：2-20位
	if (form.serviceName.length < 2 || form.serviceName.length > 20) {
		uni.showToast({ title: '服务商名称长度需为2-20位', icon: 'none' })
		return false
	}

	// 负责人：2-10位（文本）
	if (form.contactPerson.length < 2 || form.contactPerson.length > 10) {
		uni.showToast({ title: '负责人姓名长度需为2-10位', icon: 'none' })
		return false
	}

	// 位置：至少5位
	if (form.address.length < 5) {
		uni.showToast({ title: '位置请填写完整（至少5位）', icon: 'none' })
		return false
	}

	// 联系电话：11位手机号
	const phoneReg = /^1[3-9]\d{9}$/
	if (!phoneReg.test(form.contactPhone)) {
		uni.showToast({ title: '请输入正确的联系电话', icon: 'none' })
		return false
	}

	// 服务范围：至少10位
	if (form.serviceScope.length < 10) {
		uni.showToast({ title: '服务范围请填写详细（至少10位）', icon: 'none' })
		return false
	}

	// 营业执照：必须上传
	if (!form.businessLicenseUrl) {
		uni.showToast({ title: '请上传营业执照', icon: 'none' })
		return false
	}

	return true
}

// 6. 页面加载：根据新属性赋值（对应后端返回字段，需与后端协商一致）
onLoad((options) => {
	// volunteer_get_user_infoApi({
	// 	id: options.id || 1
	// }).then((res) => {
	// 	if (res.code == 200) {
	// 		const data = res.data || {}
	// 		// 新属性与后端数据映射（假设后端返回字段如下，需根据实际调整）
	// 		form.serviceName = data.serviceName || ''
	// 		form.contactPerson = data.contactPerson || ''
	// 		form.address = data.address || ''
	// 		form.contactPhone = data.contactPhone || ''
	// 		form.serviceScope = data.serviceScope || ''
	// 		form.businessLicenseUrl = data.businessLicenseUrl || ''

	// 		// 同步营业执照文件列表
	// 		if (form.businessLicenseUrl) {
	// 			licenseFileList.value = [{ url: form.businessLicenseUrl }]
	// 		}
	// 	}
	// })
})

// 7. 提交逻辑（参数与新属性对应）
const submit = async () => {
	if (loading.value) return
	if (!validateForm()) return

	loading.value = true
	try {
		// 提交参数：与 form 新属性完全对应
		const param = {
			id: options.id || '', // 从 onLoad 的 options 中获取，需提前定义 options
			serviceName: form.serviceName.trim(),
			contactPerson: form.contactPerson.trim(),
			address: form.address.trim(),
			contactPhone: form.contactPhone.trim(),
			serviceScope: form.serviceScope.trim(),
			businessLicenseUrl: form.businessLicenseUrl.trim()
		}

		const res = await volunteer_submit_userinfoApi(param)
		if (res.code == 200) {
			uni.showToast({ title: res.message || '提交成功', icon: 'success' })
			router.pushTab({ name: 'volunteer_mine' })
		} else {
			uni.showToast({ title: res.msg || '提交失败，请重试', icon: 'none' })
		}
	} catch (error) {
		console.error('提交失败：', error)
		uni.showToast({ title: '网络异常，请检查网络', icon: 'none' })
	} finally {
		loading.value = false
	}
}
</script>

<style lang="less" scoped>
 
.upload-view {
	display: flex;
	justify-content: center;
}

/* 样式保持原代码不变，此处省略（与用户提供的样式一致） */
.register-container {
	position: relative;
	padding: 80rpx 40rpx 0;
	z-index: 1;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
}

.register-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 80rpx;
	text-align: center;
}

.input-item {
	border-bottom: 1px solid #e5e5e5;
	padding: 15rpx 0;
	margin-bottom: 10rpx;
	display: flex;

	.input-icon {
		flex: 0 0 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input-icon-textarea {
		align-items: start;
		padding-top: 6px;
	}
}

.code-item {
	display: flex;
	align-items: center;
	gap: 0rpx;
}

:deep(.wd-input.is-cell) {
	padding-left: 0rpx !important;
}

:deep(.wd-cell) {
	padding-left: 0rpx !important;
}

.wd-input {
	&::v-deep .wd-input__control {
		font-size: 30rpx;
		color: #333;
		height: 80rpx;
		line-height: 80rpx;
	}

	&::v-deep .wd-input__prefix-icon {
		font-size: 34rpx;
		color: #999;
		margin-left: 10rpx;
	}

	&::v-deep .wd-input__label {
		font-size: 30rpx;
		color: #333;
		text-align: left;
	}
}

.btn-code {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

.password-match {
	margin: 5rpx 0 30rpx 150rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	gap: 5rpx;
}

.match-success {
	color: #52c41a;
}

.match-error {
	color: #ff4d4f;
}

.btn-register {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	border-radius: 16rpx;
	margin: 40rpx 0;
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666;
}

.link {
	color: #007aff;
}

.wd-textarea {
	width: 100%;
	padding-left: 0;
	padding-top: 6px;
}

:deep(.wd-textarea__label) {
	flex: 0 0 140rpx;
}

:deep(.wd-textarea__label-inner) {
	display: flex;
	align-items: start;

}

.upload-label{
    flex: 0 0 180rpx;
}
 
</style>